<template>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="checkAll" @change="checkAllFn" />
          </th>
          <th>礼品信息</th>
          <th>兑换积分</th>
          <th>数量</th>
          <th>小计（鸡腿）</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in carList" :key="item.id">
          <td>
            <input type="checkbox" v-model="item.isCheck" @change="curCheck" />
          </td>
          <td>
            <div>
              <img :src="`${proxy.$url}${item.coverImg}`" alt="" />
              <div class="text">
                <p>{{ item.title }}</p>
                <p>{{ item.versionDescription }}</p>
              </div>
            </div>
          </td>
          <td>{{ item.coin }}鸡腿</td>
          <td>
            <button @click="changeCount(-1, index)">-</button>
            <button>{{ item.total }}</button>
            <button @click="changeCount(1, index)">+</button>
          </td>
          <td>{{ item.totalCost }}鸡腿</td>
          <td><button @click="deleteFn(item.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="box11">
    <div class="total">
      <div class="box1">
        <span>总计：</span>
        <span>{{ total }}鸡腿</span>
      </div>
      <div class="box2" @click="submit">提交</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ApiShopCarts, ApiShopCartsProductIds } from './api'
import { ref, getCurrentInstance } from 'vue'
import toast from '@/components/toast'

const carList = ref<ICarData[]>([])

const { proxy } = getCurrentInstance() as { proxy: any }

const checkAll = ref<boolean>(false)

const total = ref<number>(0)

// 获取数据
const getDta = () => {
  ApiShopCarts().then((res) => {
    if (res.code === 0) {
      carList.value = res.data!
      carList.value.forEach((item, index) => {
        item.isCheck = false
      })
      checkAllFn()
    }
  })
}
getDta()

// 计数器
const changeCount = (val: number, index: number) => {
  if (carList.value[index].total === 1 && val === -1) return
  carList.value[index].total += val
  if (val === 1) {
    carList.value[index].totalCost += carList.value[index].coin
  } else {
    carList.value[index].totalCost -= carList.value[index].coin
  }
  total.value = carList.value.reduce((pre, cur) => {
    return pre + (cur.isCheck === true ? cur.totalCost : 0)
  }, 0)
}

// 全选
const checkAllFn = () => {
  if (checkAll.value === true) {
    carList.value.forEach((item, index) => {
      item.isCheck = true
    })
  } else {
    carList.value.forEach((item, index) => {
      item.isCheck = false
    })
  }
  total.value = carList.value.reduce((pre, cur) => {
    return pre + (cur.isCheck === true ? cur.totalCost : 0)
  }, 0)
}

const curCheck = () => {
  let result = carList.value.find((item) => item.isCheck === false)
  checkAll.value = result === undefined ? true : false

  total.value = carList.value.reduce((pre, cur) => {
    return pre + (cur.isCheck === true ? cur.totalCost : 0)
  }, 0)
}

// 删除
const deleteFn = (id: number) => {
  ApiShopCartsProductIds(id).then((res) => {
    if (res.code === 0) {
      toast({ str: '删除成功！', type: 'success' })
      getDta()
    }
  })
}

// 提交
const submit = () => {
  toast({ str: '功能未开放！', type: 'warn' })
}
</script>

<style lang="less" scoped>
.container {
  border: 1px solid #ccc;
  padding-bottom: 0;
  table {
    width: 100%;
    border-spacing: 0;
    thead {
      tr {
        background-color: #efefef;
        th {
          padding: 20px 0;
          text-align: center;
          font-weight: bold;
          &:first-child {
            padding-left: 20px;
            padding-right: 20px;
          }
        }
      }
    }
    tbody {
      tr {
        td {
          padding: 20px 0;
          text-align: center;
          height: 97px;
          &:first-child {
            padding-left: 20px;
            padding-right: 20px;
          }
          img {
            display: inline-block;
            width: 84px;
            height: 97px;
          }
          &:nth-child(2) {
            div {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-wrap: wrap;

              .text {
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                p {
                  &:first-child {
                    font-weight: bold;
                    font-size: 18px;
                    margin-bottom: 10px;
                  }
                }
              }
            }
          }

          &:nth-of-type(4) {
            button {
              height: 30px;
              background-color: #fff;
              border: none;
              color: #999;
              &:nth-of-type(1),
              &:nth-of-type(3) {
                width: 30px;
                border: 1px solid #d1d1d1;
              }
              &:nth-of-type(2) {
                width: 45px;
                border-top: 1px solid #d1d1d1;
                border-bottom: 1px solid #d1d1d1;
              }
            }
          }
          &:last-child {
            button {
              padding: 5px 10px;
              font-size: 18px;
              border: 1px solid #d1d1d1;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}

.box11 {
  float: right;
  .total {
    // margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .box1 {
      margin: 20px 0;
      text-align: right;
      span {
        font-size: 20px;
        font-weight: 200;
        &:last-child {
          color: #fd604d;
        }
      }
    }
    .box2 {
      width: 100px;
      height: 40px;
      line-height: 40px;
      background-color: #0a328e;
      font-size: 18px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      margin-right: 0;
      cursor: pointer;
    }
  }
}
</style>
